<template>
  <div class="calculator">
    <!-- 第一个操作数（.number修饰符确保输入为数字类型） -->
    <input 
      type="number" 
      v-model.number="num1" 
      placeholder="输入第一个数" 
    />
    <!-- 运算符选择下拉框 -->
    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <!-- 第二个操作数 -->
    <input 
      type="number" 
      v-model.number="num2" 
      placeholder="输入第二个数" 
    />
    <!-- 计算按钮（绑定点击事件） -->
    <button @click="calculate">=</button>
    <!-- 结果显示框（只读，避免手动修改） -->
    <input 
      type="text" 
      v-model="result" 
      readonly 
      placeholder="结果" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式数据：第一个操作数（初始值为5）
const num1 = ref(5);
// 响应式数据：第二个操作数（初始值为3）
const num2 = ref(3);
// 响应式数据：运算符（初始为“+”）
const operator = ref('+');
// 响应式数据：计算结果（初始显示“结果”）
const result = ref('结果');

// 计算逻辑函数（点击“=”时触发）
const calculate = () => {
  let res;
  // 根据运算符执行对应计算
  switch (operator.value) {
    case '+':
      res = num1.value + num2.value;
      break;
    case '-':
      res = num1.value - num2.value;
      break;
    case '*':
      res = num1.value * num2.value;
      break;
    case '/':
      // 特殊处理：除数不能为0
      res = num2.value !== 0 ? num1.value / num2.value : '除数不能为0';
      break;
    default:
      res = '运算符错误';
  }
  // 更新结果（视图会自动响应变化）
  result.value = res;
};
</script>

<style scoped>
.calculator {
  display: flex;
  align-items: center;
  gap: 8px; /* 元素之间的间距 */
  margin: 20px;
}

input, select {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #28a745; /* 绿色按钮 */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[readonly] {
  background-color: #f5f5f5; /* 只读输入框灰色背景 */
}
</style>